<template>
  <el-drawer title="节点设置" v-model="panelVisible" direction="rtl" :before-close="handleClose">
    <el-form ref="formRef" :model="bpmnFormData" label-width="100px" :rules="rules">
      <el-form-item label="节点指定" prop="receive_type">
        <el-select ref="type" v-model="bpmnFormData.receive_type" placeholder="请选择" @change="receiveTypeChange">
          <el-option value="USER" key="USER" label="指定人员"></el-option>
          <el-option value="ROLE" key="ROLE" label="指定角色"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="角色/人员" prop="receiver">
        <el-select ref="type" v-model="bpmnFormData.receiver" placeholder="请选择" multiple>
          <el-option v-for="item in receivers" :key="item.id" :label="item.username" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核方式" prop="approve_type">
        <el-select ref="type" v-model="bpmnFormData.approve_type" placeholder="请选择">
          <el-option value="APPROVE_ONE" key="APPROVE_ONE" label="仅一人同意"></el-option>
          <el-option value="APPROVE_ALL" key="APPROVE_ALL" label="全员同意"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核说明" prop="remark">
        <el-input v-model="bpmnFormData.desc" type="textarea" />
      </el-form-item>
    </el-form>
    <div class="modal-create-or-edit-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit(formRef)">确 定</el-button>
    </div>
  </el-drawer>
</template>

<script setup lang="ts" name="customPropertiesPanel">
import { ref, reactive, onMounted, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessageBox } from "element-plus";
import { getUserList, getRoleList } from "@/api/modules/workflow/workflowConfig";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  data: {
    type: Object,
    default: () => ({})
  }
});

const formRef = ref<FormInstance>();
export interface Receiver {
  id: number;
  username: string;
}
let receivers = ref<Receiver[]>([]);
const bpmnFormData = reactive({
  receive_type: "USER",
  receiver: [] as any[],
  approve_type: "APPROVE_ONE",
  desc: ""
});
const panelVisible = ref(false);
const emit = defineEmits(["submit", "cancel"]);
const rules = reactive<FormRules<typeof bpmnFormData>>({
  receive_type: [
    { required: true, message: "不能为空", trigger: "blur" },
    { required: true, message: "长度需为0~64个字符", min: 0, max: 64, trigger: "blur" }
  ],
  receiver: [{ required: true, message: "不能为空", trigger: "blur" }],
  approve_type: [{ required: true, message: "不能为空", trigger: "blur" }]
});

watch(
  () => props.data,
  (val: any) => {
    if (!val) return;
    Object.assign(bpmnFormData, val);
    bpmnFormData.receiver = val.receiver.length ? bpmnFormData.receiver.map(item => item.id) : [];
    console.log("formData", bpmnFormData);
  },
  { deep: true, immediate: true }
);
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("您仍有未保存的数据，是否关闭?").then(() => {
    done();
    closeDialog();
    emit("cancel");
  });
};

const openDialog = () => {
  panelVisible.value = true;
};
const closeDialog = () => {
  panelVisible.value = false;
};
const cancel = () => {
  ElMessageBox.confirm("您仍有未保存的数据，是否关闭?").then(() => {
    closeDialog();
    emit("cancel");
  });
};

const receiveTypeChange = async (val: string) => {
  bpmnFormData.receiver = [];
  receivers.value = [];
  if (val === "USER") {
    const { data } = (await getUserList()) as any;
    if (data && data.length) {
      receivers.value = data.map((item: any) => {
        return { id: item.id, username: item.username };
      });
    }
  } else if (val === "ROLE") {
    const { data } = (await getRoleList()) as any;
    if (data && data.length) {
      receivers.value = data.map((item: any) => {
        return { id: item.id, username: item.name };
      });
    }
  }
};

const submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) return;
    const data = receivers.value.filter((item: any) => {
      if (!bpmnFormData.receiver.includes(item.id)) return;
      if (bpmnFormData.receive_type === "USER") {
        return { id: item.id, username: item.username };
      } else {
        return { id: item.id };
      }
    });
    bpmnFormData.receiver = [...data];
    closeDialog();
    emit("submit", bpmnFormData);
  });
};

onMounted(async () => {
  openDialog();
  const { data } = (await getUserList()) as any;
  if (data && data.length) {
    receivers.value = data.map((item: any) => {
      return { id: item.id, username: item.username };
    });
  }
});
</script>
<style lang="scss" scoped>
:deep().el-drawer__body {
  position: relative;
}
.modal-create-or-edit-footer {
  position: absolute;
  right: 24px;
  bottom: 20px;
}
</style>
